<template>
    <section class="section">
        <div>
            <mt-header title="开始检查" class="header">
                <router-link to="/mycheckContent" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
                <i slot="right" @click="open = true" class="iconfont iconshaixuan4 active-color right-icon"></i>
            </mt-header>
        </div>
        <section class="content">
            <div class="con">
                <ul>
                    <li>
                        <span>项目名称:</span>
                        <span>{{data.orgName}}</span>
                    </li>
                    <li>
                        <span>检查类型:</span>
                        <span>{{data.checkTypeName}}</span>
                    </li>
                    <li>
                        <span>所属区域:</span>
                        <span>{{data.areaName}}</span>
                    </li>
                    <li>
                        <span>检查部位:{{data.checkParts}}</span>
                    </li>
                </ul>
                <ul>
                    <mu-expansion-panel :expand="true" v-for="(item, i) in tableList.tableList" :key="i">
                        <div slot="header" style="font-size: 0.1rem">检查表名称: {{item.name}}</div>
                        <section class="table">
                            <div class="tr header">
                                <div class="td">测试检查表</div>
                            </div>
                            <table border="1" bordercolor="#D9D9D9" class="table">
                                <thead>
                                <tr>
                                    <th>检查项</th>
                                    <th>检查内容</th>
                                    <th>检查结果</th>
                                </tr>
                                </thead>
                                <tbody v-for="(item_children, icn_i) in item.itemContentList" :key="icn_i">
                                <tr v-for="(item_childs, ic_i) in item_children.contentList" :key="ic_i">
                                    <td
                                            v-if="ic_i === 0"
                                            :rowspan="item_children.contentList.length"
                                    >{{item_children.item}}
                                    </td>
                                    <td>{{item_childs.contentName}}</td>
                                    <td>
                                        <mu-radio
                                                v-model="radioFormGroup[`radio${icn_i}-${ic_i}`]"
                                                value="0"
                                                label="无问题"
                                        ></mu-radio>
                                        <mu-radio
                                                v-model="radioFormGroup[`radio${icn_i}-${ic_i}`]"
                                                value="1"
                                                label="有问题"
                                                @change="problem(item.id,item_childs)"
                                        ></mu-radio>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </section>
                    </mu-expansion-panel>
                    <li>
                        <span>检查结果:</span>
                        <span>{{`${selectedRadioNum === 0 ? '暂无数据' : `${selectedRadioNum}个问题`}`}}</span>
                    </li>
                    <mu-form ref="form" :model="validateForm" class="mu-demo-form">
                        <li v-if="selectedRadioNum == 0">
                            <mu-form-item style="width:100%;" prop="rectCopyUserIds" help-text="请选择抄送人" label="抄送人"
                                          :rules="rectCopyUserIds">
                                <mu-select filterable multiple v-model="validateForm.rectCopyUserIds" full-width>
                                    <mu-option v-for="(city,index) in citys" :key="index" :label="city.name"
                                               :value="city.id"></mu-option>
                                </mu-select>
                            </mu-form-item>
                        </li>
                        <li v-if="selectedRadioNum == 0">
                            <span>检查人签字:</span><span>{{'测试王丽'}}</span>
                        </li>
                        <li v-if="selectedRadioNum == 0">
                            <mu-form-item>
                                <mu-button color="primary" @click="submit">提交</mu-button>
                                <mu-button @click="clear">重置</mu-button>
                            </mu-form-item>
                        </li>
                        <div v-if="selectedRadioNum !== 0">
                            <problem-template
                                    @ProblemChange="handleProblemChange"
                                    v-for="(item, pt_i) in selectedRadioNum"
                                    :key="item + pt_i"
                            ></problem-template>
                            <mu-form-item>
                                <mu-button color="primary" @click="submit">提交</mu-button>
                                <mu-button @click="clear">重置</mu-button>
                            </mu-form-item>
                        </div>
                    </mu-form>
                </ul>
                <!-- <checklist></checklist> -->
            </div>
        </section>
    </section>
</template>

<script>
    import checklist from "./components/noPoblem/checklist";
    import ProblemTemplate from "../../QualityModule/ProblemTemplate";
    import apis from "../../../services/apis";

    export default {
        name: "startChecking",
        components: {
            checklist,
            ProblemTemplate
        },
        data () {
            return {
                ProblemSet:[],
                contentName:'',
                citys: [],
                radio:[
                    { validate: (val) => !!val, message: '必须填写检查结果'}
                ],
                rectCopyUserIds:[
                    { validate: (val) => !!val, message: '必须填写检查结果'}
                ],
                selected: true,
                data: {},
                tableList: [],
                validateForm: {
                    radio:'',
                    rectCopyUserIds:[],
                },
                radioFormGroup: {},
                questionsData: [],
                showProblemTemplate: false,
                selectedRadioNum: 0,
            };
        },
        mounted () {
            this.fetch();
            this.Troubleshooting();
            this.personnel();
        },
        methods: {
            problem (id,value) {
                console.log(id,value);
                // this.arr = [];
                // if (this.selectedRadioNum === 1 ){
                //     this.arr.push({checkTableId:id,itemContent:value.contentName})
                // }
            },
            //人员信息接口
            personnel () {
                this.$A.Go('post', '/safety/corp/users',{
                    obj:{
                        projectId:'60820044036178326',
                    },
                    pageNo:1,
                    pageSize:10,
                }).then((success) => {
                    if (success.code == 200) {
                        for (var i in success.body) {
                            this.citys.push({name:success.body[i].fullName,id:success.body[i].id})
                        }
                        console.log(this.citys);
                    }else {
                    }
                })
            },
            submit () {
                console.log(this.selectedRadioNum);
                this.$refs.form.validate().then((result) => {
                    console.log(this.data);
                    if (result == true) {
                        let params = {
                            checkResult:this.selectedRadioNum == 0 ? 0 : 1,
                            areaId: this.data.areaId,
                            checkCopyUserIds: this.validateForm.rectCopyUserIds,//检查抄送人
                            checkParts: this.data.checkParts,
                            // checkResult: this.validateForm.radio,//检查结果 0无问题 1有问题
                            // checkSignature:this. 签名
                            checkTypeId: this.data.checkTypeId,//检查类型id
                            orgId: this.data.orgId,//项目id
                            // id:this.data.id,
                            id: '159827745033945494',
                            // scenePhotos://现场照片 格式[‘1’,’2’]
                            problemList: this.ProblemSet,//问题列表

                        };
                        this.$A.Go('post', '/safety/checkTask/submit', params).then((success) => {
                            if (success.code == 200) {
                                this.$A.MS('提交成功！', 'success')
                            } else {
                                this.$A.MS('操作失败！', 'error')
                            }
                        })
                    }
                });
            },
            clear () {
                this.$refs.form.clear();
                this.validateForm = {
                    username: '',
                    password: '',
                    isAgree: false
                };
            },
            //获取回显信息
            fetch () {
                let params = {
                    id: "159714885104566678"
                };
                this.$A.Go("get", "/safety/checkPlan/detail", params).then(success => {
                    if (success.code == 200) {
                        console.log(success);
                        this.data = success.body;
                    } else {
                    }
                });
            },
            Troubleshooting () {
                let params = {
                    checkPlanId: "159723511546380694"
                };
                this.$A
                    .Go("get", "/safety/checkPlan/checkTables", params)
                    .then(success => {
                        if (success.code == 200) {
                            this.tableList = success.body;
                            console.log(this.tableList);

                            const {itemContentList} = this.tableList.tableList[0];
                            for (let i = 0; i < itemContentList.length; i++) {
                                for (let j = 0; j < itemContentList[i].contentList; j++) {
                                    this.radioFormGroup[`radio${i}-${j}`] = "";
                                }
                            }
                        } else {
                        }
                    });
            },
            /**
             * 子组件更新父组件数据
             */
            handleProblemChange (payload) {
                console.log("载荷：", payload);
                this.ProblemSet.push(payload);
            }
        },
        watch: {
            radioFormGroup: {
                handler (newVal, oldVal) {
                    this.selectedRadioNum = 0;
                    for (let key in newVal) {
                        if (newVal[key] === '1') {
                            this.selectedRadioNum = this.selectedRadioNum + 1;
                            console.log(this.selectedRadioNum);
                        }
                    }
                },
                deep: true
            }
        }
    };
</script>

<style scoped lang="scss">
    .section {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .content {
            flex: 1;
            overflow: auto;
            padding: 0.1rem 0;
            .con {
                display: flex;
                flex-direction: column;
                padding: 0.1rem;
                ul {
                    background: white;
                    width: 100%;
                    height: 100%;
                    list-style: none;
                    padding: 0.12rem;
                    margin: 0.01rem 0;
                    overflow: hidden;
                    font-size: 0.12rem;
                    li {
                        display: flex;
                        justify-content: space-between;
                        padding: 0.1rem 0;
                    }
                    .table {
                        width: 100%;
                        height: auto;
                        border: 1px solid #dedede;
                        font-size: 0.12rem;
                        line-height: 0.2rem;
                        .tr {
                            width: 100%;
                            border-bottom: 1px solid #dedede;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .td {
                                border-left: 1px solid #dedede;
                                width: 100%;
                                text-align: center;
                                .tr {
                                    border-bottom: 1px solid #dedede;
                                    border-left: none;
                                }
                                > .tr:last-child {
                                    border: none;
                                }
                            }
                            > .td:first-child {
                                border: none;
                            }
                            .tr {
                                border-left: 1px solid #dedede;
                            }
                        }
                        > .tr:last-child {
                            border: none;
                        }
                        .header {
                            background-color: #ddd;
                            color: #000;
                        }
                        .subheader {
                            background-color: #eee;
                            color: #333;
                        }
                    }
                }
            }
        }
    }
</style>
